<template>
	<view>
		<u-navbar title="新增乘机人" back-text='取消' back-icon-size='0' :back-text-style='back' :border-bottom='false'>
			<view slot='right' style='padding-right: 32rpx;font-size: 30rpx;color: #3587F7;' @click="comfirm">
				确认
			</view>
		</u-navbar>
		<view class="container">
			<view class="btnBox">
				<view class="btn" @click="chooseImg">
					身份证扫描
				</view>
				<view class="btn">
					邀请好友填写
				</view>
			</view>
			<view class="tips">
				<text style="color: #E5793B;">小贴士：</text><text style="color: #666666;">姓名需与乘机证件一致，否则会影响登机</text>
			</view>
			<view class="infoBox">
					<u-form :model="form" ref="uForm">
						<u-form-item label="姓名"><u-input v-model="form.name" placeholder="请输入姓名" /></u-form-item>
						<u-form-item label="证件类型"><u-input type="select" v-model="form.type" /></u-form-item>
						<u-form-item label="证件号码"><u-input v-model="form.number" placeholder="请输入证件号" /></u-form-item>
						<u-form-item label="手机号码"><u-input type="number" v-model="form.mobile" placeholder="请输入手机号" /></u-form-item>
					</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data(){
			return {
				back:{
					color:'#3587F7'
				},
				form:{
					name:'',
					number:'',
					type:'身份证',
					mobile:''
				}
			}
		},
		methods:{
			// 拍照身份证
			chooseImg(){
				let that = this
				uni.chooseImage({
				    count: 1,
				    sizeType: ['original'],
				    sourceType: ['camera'],
				    success: function (res) {
							that.uploadImg(res.tempFilePaths)
				    }
				});
			},
			
			// 上传身份证识别
			uploadImg(imgFiles) {
				let that = this
				uni.uploadFile({
					url: that.$baseURL + 'upload/idcard',
					filePath: imgFiles[0],
					name: 'file',
					success: (uploadFileRes) => {
						let obj = JSON.parse(uploadFileRes.data)
						if (obj.status) {
							// 识别成功
							uni.showToast({
								title:'识别成功'
							})
							that.form.name = obj.data.words_result["姓名"].words
							that.form.number = obj.data.words_result["公民身份号码"].words
						}else {
							// 识别失败
							uni.showToast({
								title:obj.msg,
								icon:'none'
							})
						}
					}
				})
			},
			
			async comfirm(){
				let { form } = this
				if(!form.name){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return
				}
				if(!form.number){
					uni.showToast({
						title:'请输入证件号',
						icon:'none'
					})
					return
				}
				if(!form.mobile) {
					uni.showToast({
						title:'请输入手机',
						icon:'none'
					})
					return
				}
				let res =await myRequest.addTripman({
					id_name:form.name,
					id_number:form.number,
					id_type:'1',
					mobile:form.mobile
				})
				if(res.status) {
					uni.showToast({
						title:'新增成功',
						success() {
							uni.navigateBack({
								delta:1
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.btnBox {
			padding: 24rpx 28rpx;
			display: flex;
			justify-content: space-between;
			.btn{
				width: 336rpx;
				height: 76rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #3587F7;
				line-height: 76rpx;
				text-align: center;
			}
		}
		
		.tips {
			padding: 0 28rpx;
			width: 100%;
			height: 80rpx;
			background: #FEF7EF;
			font-size: 24rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 80rpx;
		}
		.infoBox {
			width: 100%;
			height: auto;
			padding: 0 28rpx;
			background-color: #FFFFFF;
		}
	}
	
	/deep/ .u-form-item--left {
		flex:0 0 160rpx !important;
	}
</style>
